<template>
    <div>
        <div class="banner h-[450px] bg-[#f3faf9] w-full text-center">
            <div
                class="banner-bg w-[1920px] text-[42px] text-[#262626] h-full mx-auto text-center"
            >
                <span class="animate-trigger">
                    个性化精准营养服务带给每一位用户
                </span>
            </div>
        </div>
        <div
            class="w-[1200px] mx-auto pt-[100px] pb-[80px] flex justify-between gap-[55px]"
        >
            <div class="content-img w-[430px] h-[600px] bg-[#e0e0e0]">
                <img
                                        src="https://oss.acehls.com/obj/shizhian.png"
                                        
                                        class="w-[430px] h-[600px]"
                                    />
            </div>
            <div class="content-time-line flex-1">
                <a-timeline>
                    <template
                        v-for="(item, index) in timelineItems"
                        :key="index"
                    >
                        <a-timeline-item>
                            <template #dot>
                                <div class="custom-dot">
                                    <div class="inner-dot"></div>
                                    <div class="ripple"></div>
                                    <div
                                        class="ripple"
                                        style="animation-delay: 0.5s"
                                    ></div>
                                </div>
                            </template>
                            <div class="timeline-content animate-trigger">
                                <div class="text-[42px] font-500 mb-[5px]">
                                    {{ item.title }}
                                </div>
                                <div class="text-[14px] text-[#666]">
                                    {{ item.content }}
                                </div>
                            </div>
                        </a-timeline-item>
                    </template>
                    <a-timeline-item>
                        <template #dot>
                            <span></span>
                        </template>
                    </a-timeline-item>
                </a-timeline>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref, onMounted, onUnmounted } from 'vue'

const timelineItems = [
    {
        title: '石治安先生',
        content: '用体验经历，创造ACEHEAL品牌'
    },
    {
        content:
            '40岁时，我正处于事业扩张阶段，频繁的出差、加班、应酬导致身体处于健康与疾病的临界点，血糖、血压、血脂等健康指标纷纷亮起红灯，如果按照医嘱吃药、严格作息，就无法兼顾事业，于是我开始寻求现代临床医学以外的方式来调理身体。在医学专家、营养专家和运动专家的悉心指导下，通过自然疗法服用膳食营养补充剂、均衡饮食、科学运动，实现了从亚健康到健康的逆转'
    },
    {
        content:
            '我的家人和朋友知道我的这次经历后，也开始尝试采用自然疗法调理身体，效果都非常好。那时候我就在想，既然自然疗法是非常科学且十分有效的，为什么不用我的经历去帮助更多的人呢？所以我创立了精准营养健康品牌ACEHEAL艾斯康'
    },
    {
        content:
            '为了将全球领先的个性化精准营养服务带给每一位用户，我们邀请国际知名抗衰品牌Jinfiniti创始人、长寿领域的顶尖华人科学家佘金雄博士，担任品牌首席技术顾问，在抗衰老产品研发、健康生活方式辅导等方面开展紧密合作，造就品牌硬核科研力'
    },
    {
        content:
            '如今，ACEHEAL艾斯康凭借在膳食营养补充剂行业多年的深厚积累和市场应用经验，已帮助数千名用户从根源上解决各类健康问题，焕发由内而外的健康活力'
    }
]

const observer = ref<IntersectionObserver | null>(null)

onMounted(() => {
    observer.value = new IntersectionObserver(
        entries => {
            entries.forEach(entry => {
                if (entry.isIntersecting) {
                    entry.target.classList.add('animate-in')
                }
            })
        },
        {
            threshold: 0.1
        }
    )

    document.querySelectorAll('.animate-trigger').forEach(el => {
        observer.value?.observe(el)
    })
})

onUnmounted(() => {
    if (observer.value) {
        observer.value.disconnect()
    }
})
</script>

<style lang="less" scoped>
::v-deep(.ant-timeline-item-content) {
    margin-inline-start: 70px !important;
    line-height: 1.8;
}

.banner {
    &-bg {
        background: url('../../assets/images/integrity/banner.png') no-repeat;
        background-size: 1920px 450px;
        line-height: 450px;
    }
}

.custom-dot {
    position: relative;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;

    .inner-dot {
        width: 16px;
        height: 16px;
        background-color: #3c8916;
        border-radius: 50%;
        z-index: 1;
    }

    .ripple {
        position: absolute;
        top: 0;
        left: 0;
        width: 28px;
        height: 28px;
        background-color: rgba(60, 137, 22, 0.3);
        border-radius: 50%;
        animation: ripple 2s cubic-bezier(0.4, 0, 0.2, 1) infinite;
    }
}

@keyframes ripple {
    0% {
        transform: scale(0.65);
        opacity: 0.8;
    }
    50% {
        transform: scale(1);
        opacity: 0.2;
    }
    100% {
        transform: scale(0.65);
        opacity: 0.8;
    }
}

// 文字动画相关样式
.animate-trigger {
    opacity: 0;
    transform: translateX(30px);
    transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.animate-in {
    opacity: 1;
    transform: translateX(0);
}

// 为每个时间线项添加递增延迟
.timeline-content {
    .loop(@i) when (@i <= 5) {
        &:nth-child(@{i}) {
            transition-delay: (@i * 0.2s);
        }
        .loop(@i + 1);
    }
    .loop(1);
}

// 覆盖 antd 时间轴的默认样式
::v-deep(.ant-timeline-item-head) {
    background: transparent;
    border: none;
}

::v-deep(.ant-timeline-item-tail) {
    border-inline-start: 2px solid rgba(60, 137, 22, 0.2);
}

::v-deep(.ant-timeline-item) {
    padding-bottom: 32px;

    &:last-child {
        padding-bottom: 0;
    }
}
</style>
